<template>
    <view class="page">
        <u-toast ref="uToast"></u-toast>
        <view class="content">
            <u-form labelPosition="left"
                    labelWidth="100"
                    :model="form"
                    ref="uForm">
                <u-form-item label="新手机号" prop="building" borderBottom>
                    <u-input v-model="form.tel" border="none" placeholder="请输入新手机号"></u-input>
                </u-form-item>
                <u-form-item label="验证码" prop="building" borderBottom>
                    <u-input v-model="form.code" placeholder="请输入验证码" border="none">
                        <template slot="suffix">
                            <u-code
                                    ref="uCode"
                                    @change="codeChange"
                                    seconds="60"
                                    changeText="X秒重新获取"
                            ></u-code>
                            <u-button
                                    @tap="getCode"
                                    :text="tips"
                                    type="success"
                                    size="small"
                            ></u-button>
                        </template>
                    </u-input>
                </u-form-item>
            </u-form>
        </view>
        <view style="width:100%;height: 70px;background-color: #fff;position: fixed;bottom: 1px">
            <u-row>
                <u-button type="primary" text="保存" @click="save"></u-button>
            </u-row>

            <view class="safe-area-inset-bottom"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "bind",
        data(){
            return{
                form:{
                    tel: ''
                },
                tips:'',
            }
        },
        methods:{
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
                if (this.$refs.uCode.canGetCode) {
                    if (!uni.$u.test.mobile(this.form.tel)) {
                        this.$refs.uToast.show({
                            type: 'error',
                            // title: '失败主题',
                            message: "请输入正确的手机号",
                            iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
                        });
                        return;
                    }
                    uni.showLoading({title: '正在获取验证码'});
                    // 向后端请求验证码
                    uni.$u.http.post('/api.php/index/tel_code', {tel: form.tel}).then(res => {
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        uni.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    });
                } else {
                    uni.$u.toast('倒计时结束后再发送');
                }
            },
            change(e) {
                console.log('change', e);
            },

            save(){
                // todo 修改手机号接口


                uni.$u.http.post('/', {tel: form.tel}).then(res => {
                    uni.navigateBack({delta:1});
                }).catch(res => {
                    this.$refs.uToast.show({
                        type: 'error',
                        message: "保存失败",
                        iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
                    });
                });

            },
        }
    }
</script>

<style scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);
    }
    .content{
        padding: 20rpx;
    }

</style>